<div class="content-area">
  <a href="javascript:history.back()">&lt;&lt;{{'CommonlyUse.back'| translate}}</a>
  <br>
  <h2>{{'DirectorNew.name' | translate}}</h2>
  <br>
  <form clrStepper [formGroup]="form">
    <!-- one -->
    <clr-stepper-panel formGroupName="info">
      <clr-step-title>{{'NewCluster.basicInformation'| translate}}</clr-step-title>
      <clr-step-description></clr-step-description>
      <clr-step-content *clrIfExpanded>
        <clr-input-container class="no-warp">
          <label>{{'CommonlyUse.name'| translate}}</label>
          <input clrInput formControlName="name" required (ngModelChange)="selectChange($event)" />
          <clr-control-error *clrIfError="'required'">{{ 'validator.empty' | translate}}</clr-control-error>
        </clr-input-container>

        <clr-textarea-container>
          <label>{{'CommonlyUse.description'| translate}}</label>
          <textarea clrTextarea class="t2" name="description" formControlName="description"></textarea>
        </clr-textarea-container>
        <button clrStepButton="next" [disabled]="!form.controls['info'].valid">{{'CommonlyUse.next'|
          translate}}</button>
      </clr-step-content>
    </clr-stepper-panel>
    <!-- two -->
    <clr-stepper-panel formGroupName="endpoint">
      <clr-step-title>{{'NewCluster.selectEndpoint'| translate}}</clr-step-title>
      <clr-step-description></clr-step-description>
      <clr-step-content *clrIfExpanded>
        <clr-alert [clrAlertClosable]='false' clrAlertType="danger" *ngIf="isShowEndpointFailed">
          <clr-alert-item>
            {{errorMessage}}
          </clr-alert-item>
        </clr-alert>
        <h6 *ngIf="!noEndpoint"><b>{{'EndpointNew.currentSelection'|translate}}:</b>&nbsp;&nbsp;&nbsp;&nbsp;<span
            style="color:#247bae;">{{selectedEndpoint?.name}}</span></h6>
        <clr-alert [clrAlertClosable]='false' clrAlertType="info" *ngIf="noEndpoint">
          <clr-alert-item>
            <span>{{'NewCluster.noEndpoint'| translate}}<a href="javascript:void(0)"
                [routerLink]="['/endpoint']">{{'EndpointNew.clickHere'| translate}}</a></span>
          </clr-alert-item>
        </clr-alert>
        <clr-datagrid [(clrDgSingleSelected)]="selectedEndpoint">
          <clr-dg-column [clrDgField]="'name'">{{'CommonlyUse.name'| translate}}</clr-dg-column>
          <clr-dg-column>{{'CommonlyUse.description'| translate}}</clr-dg-column>
          <clr-dg-column>{{'CommonlyUse.type'| translate}}</clr-dg-column>
          <clr-dg-column>{{'NewCluster.namespace'| translate}}</clr-dg-column>
          <clr-dg-column>{{'CommonlyUse.creationTime'| translate}}</clr-dg-column>
          <clr-dg-column>{{'EndpointMg.infraName'|translate}}</clr-dg-column>
          <clr-dg-column>{{'EndpointMg.endpointURL'|translate}}</clr-dg-column>
          <clr-dg-column>{{'CommonlyUse.status'| translate}}</clr-dg-column>
          <clr-dg-row *clrDgItems="let endpoint of endpointlist" [clrDgItem]="endpoint">
            <clr-dg-cell>{{endpoint?.name}}</clr-dg-cell>
            <clr-dg-cell>{{endpoint?.description}}</clr-dg-cell>
            <clr-dg-cell>{{endpoint?.type}}</clr-dg-cell>
            <clr-dg-cell>{{endpoint?.namespace}}</clr-dg-cell>
            <clr-dg-cell>{{endpoint?.created_at | date : "medium"}}</clr-dg-cell>
            <clr-dg-cell>{{endpoint?.infra_provider_name}}</clr-dg-cell>
            <clr-dg-cell>{{endpoint?.kubefate_host}}</clr-dg-cell>
            <clr-dg-cell *ngIf="endpoint">{{constantGather('endpointstatus', endpoint.status).name | translate}}
            </clr-dg-cell>
          </clr-dg-row>
        </clr-datagrid>
        <button clrStepButton="next" [disabled]="!endpointSelectOk">{{'CommonlyUse.next'| translate}}</button>
      </clr-step-content>
    </clr-stepper-panel>
    <!-- three -->
    <clr-stepper-panel formGroupName="chart">
      <clr-step-title>{{'NewCluster.selectChart'| translate}}</clr-step-title>
      <clr-step-description></clr-step-description>
      <clr-step-content *clrIfExpanded>
        <clr-alert [clrAlertClosable]='false' clrAlertType="danger" *ngIf="isShowChartFailed">
          <clr-alert-item>
            {{errorMessage}}
          </clr-alert-item>
        </clr-alert>
        <clr-select-container class="no-warp">
          <label>{{'Chart.name'| translate}}</label>
          <select clrSelect name="chart" formControlName="chart_uuid" required (ngModelChange)="selectChange($event)">
            <option *ngFor="let chart of chartlist" value="{{chart.uuid}}">{{chart.name}}</option>
          </select>
        </clr-select-container>
        <button clrStepButton="next" [disabled]="!form.controls['chart'].valid">{{'CommonlyUse.next'|
          translate}}</button>
      </clr-step-content>
    </clr-stepper-panel>
    <!-- four -->
    <clr-stepper-panel formGroupName="namespace">
      <clr-step-title>{{'NewCluster.setNamespace'|translate}}</clr-step-title>
      <clr-step-description></clr-step-description>
      <clr-step-content *clrIfExpanded>
        <clr-input-container class="no-warp">
          <label>{{'NewCluster.namespace'|translate}}</label>
          <input clrInput Placeholder="Default: fate-exchange" formControlName="namespace"
            [disabled]="setNamespaceDisabled"
            [class]="{disabled: setNamespaceDisabled}"
            (ngModelChange)="selectChange($event)" />
        </clr-input-container>
        <button clrStepButton="next">{{'CommonlyUse.next'| translate}}</button>
      </clr-step-content>
    </clr-stepper-panel>
    <!-- five -->
    <clr-stepper-panel formGroupName="certificate">
      <clr-step-title>{{'NewCluster.selectCertificates'|translate}}</clr-step-title>
      <clr-step-description></clr-step-description>
      <clr-step-content *clrIfExpanded>
        <clr-radio-container clrInline>
          <clr-radio-wrapper>
            <input type="radio" clrRadio name="cert" formControlName="cert" required value="use"
              (ngModelChange)="setRadioDisplay($event)" />
            <label>{{'NewCluster.useCertificates'|translate}}</label>
          </clr-radio-wrapper>
          <clr-radio-wrapper>
            <input type="radio" clrRadio name="cert" formControlName="cert" required value="skip"
              (ngModelChange)="setRadioDisplay($event)" />
            <label>{{'NewCluster.skip'|translate}}</label>
          </clr-radio-wrapper>
        </clr-radio-container>
        <div *ngIf="use_cert">
          <h5>1. {{'DirectorNew.directorServerCertificate'|translate}}:</h5>
          <clr-radio-container clrInline class="no-warp">
            <label>{{'NewCluster.server'|translate}}:</label>
            <clr-radio-wrapper>
              <input type="radio" clrRadio name="director_server_cert_info_mode"
                formControlName="director_server_cert_info_mode" required value=3>
              <label>{{'NewCluster.addNew'|translate}}</label>
            </clr-radio-wrapper>
            <clr-radio-wrapper>
              <input type="radio" disabled clrRadio name="director_server_cert_info_mode" required value=2 />
              <label>{{'NewCluster.useExist'|translate}}</label>
            </clr-radio-wrapper>
          </clr-radio-container>
          <br>
          <h5>2. {{'DirectorNew.certificate'|translate}}:</h5>
          <clr-radio-container clrInline class="no-warp">
            <label>{{'NewCluster.client'|translate}}:</label>
            <clr-radio-wrapper>
              <input type="radio" clrRadio name="jupyter_client_cert_info_mode"
                formControlName="jupyter_client_cert_info_mode" required value=3 />
              <label>{{'NewCluster.addNew'|translate}}</label>
            </clr-radio-wrapper>
            <clr-radio-wrapper>
              <input type="radio" [disabled]='true' clrRadio name="jupyter_client_cert_info_mode" required value=2 />
              <label>{{'NewCluster.useExist'|translate}}</label>
            </clr-radio-wrapper>
          </clr-radio-container>
        </div>

        <button clrStepButton="next" [disabled]="cert_disabled">{{'CommonlyUse.next' | translate}}</button>
      </clr-step-content>
    </clr-stepper-panel>
    <!-- six -->
    <clr-stepper-panel formGroupName="jupyter">
      <clr-step-title>{{'DirectorNew.jupyterNotebook'|translate}}</clr-step-title>
      <clr-step-description></clr-step-description>
      <clr-step-content *clrIfExpanded>
        <clr-password-container class="clr-row-password" clrInline>
          <label>{{'DirectorNew.password'|translate}}:</label>
          <input clrPassword placeholder="Password" name="password" formControlName="password" />
        </clr-password-container>
      </clr-step-content>
      <button clrStepButton="next" [disabled]="!form.controls['jupyter'].get('password')?.value">{{'CommonlyUse.next' |
        translate}}</button>
    </clr-stepper-panel>
    <!-- seven -->
    <clr-stepper-panel formGroupName="serviceType">
      <clr-step-title>{{'ExchangeNew.chooseServiceType'|translate}}</clr-step-title>
      <clr-step-description></clr-step-description>
      <clr-step-content *clrIfExpanded>
        <clr-radio-container clrInline class="no-warp">
          <label>{{'ExchangeNew.serviceType'|translate}}: </label>
          <clr-radio-wrapper>
            <input type="radio" clrRadio name="serviceType" formControlName="serviceType" required value=1
              (ngModelChange)="selectChange($event)" />
            <label>{{'ExchangeNew.loadBalancer'|translate}}</label>
          </clr-radio-wrapper>
          <clr-radio-wrapper>
            <input type="radio" clrRadio name="serviceType" formControlName="serviceType" required value=2
              (ngModelChange)="selectChange($event)" />
            <label>{{'ExchangeNew.nodePort'|translate}}</label>
          </clr-radio-wrapper>
        </clr-radio-container>
      </clr-step-content>
      <button clrStepButton="next" [disabled]="service_type_disabled">{{'CommonlyUse.next' | translate}}</button>
    </clr-stepper-panel>
    <!-- eight -->
    <clr-stepper-panel formGroupName="registry">
      <clr-step-title>{{'DirectorNew.configuration' | translate}}</clr-step-title>
      <clr-step-description></clr-step-description>
      <clr-step-content *clrIfExpanded>
        <ul class="list">
          <clr-toggle-container clrInline class="no-warp no-warp2">
            <label>{{'InfraProvider.useRegistryConfiguration'|translate}}:</label>
            <clr-toggle-wrapper>
              <input type="checkbox" clrToggle name="useRegistry" value="useRegistry" formControlName="useRegistry"
                (ngModelChange)="onChange_use_registry($event)" />
              <label>{{useRegistry}}</label>
            </clr-toggle-wrapper>
          </clr-toggle-container>
          <ul class="list" *ngIf="useRegistry">
            <clr-input-container class="no-warp no-warp2">
              <label>{{"InfraProvider.registry"|translate}}</label>
              <input clrInput name="registryConfig" formControlName="registryConfig"
                placeholder="{{'InfraProvider.togglePlacerHolder'|translate}}" required
                (ngModelChange)="selectChange($event)" />
              <clr-control-helper>{{'InfraProvider.imageName'|translate}}:&nbsp;&nbsp;&nbsp;
                <b style="color: #247bae;"><span>{{registryConfig}}</span>
                  <span *ngIf="registryConfig===''">federatedai</span>/myimage:latest
                </b>
              </clr-control-helper>
              <clr-control-error>{{'validator.empty'| translate}} </clr-control-error>
            </clr-input-container>
          </ul>
          <br>
        </ul>
        <ul class="list">
          <clr-toggle-container clrInline class="no-warp no-warp2">
            <label>{{'InfraProvider.useRegistrySecret'|translate}}:</label>
            <clr-toggle-wrapper>
              <input type="checkbox" clrToggle name="useRegistrySecret" value="useRegistrySecret"
                formControlName="useRegistrySecret" (ngModelChange)="onChange_use_registry_secret($event)" />
              <label>{{useRegistrySecret}}</label>
            </clr-toggle-wrapper>
          </clr-toggle-container>
          <ul class="list" *ngIf="useRegistrySecret">
            <li>
              <clr-input-container class="no-warp">
                <label>{{'InfraProvider.serverURL'|translate}}</label>
                <input clrInput name="server_url" formControlName="server_url" required />
                <clr-control-helper *ngIf="!valid_server_url">{{'InfraProvider.urlSuggestion'|translate}} <b
                    style="color: #247bae;">{{server_url_suggestion}}</b></clr-control-helper>
                <clr-control-error>{{'validator.internet'| translate}}</clr-control-error>
                <clr-control-error>{{'InfraProvider.urlSuggestion'|translate}} <b>{{server_url_suggestion}}</b>
                </clr-control-error>
              </clr-input-container>
            </li>
            <li>
              <clr-input-container class="no-warp">
                <label>{{'InfraProvider.username'|translate}}</label>
                <input clrInput name="username" formControlName="username" required />
                <clr-control-error>{{'validator.empty'| translate}}
                </clr-control-error>
              </clr-input-container>
            </li>
            <li>
              <clr-password-container class="no-warp">
                <label>{{'InfraProvider.password' |translate}}</label>
                <input name="password" clrPassword formControlName="password" required />
                <clr-control-error>{{'validator.empty'| translate}}
                </clr-control-error>
              </clr-password-container>
            </li>
          </ul>
        </ul>
      </clr-step-content>
      <button clrStepButton="next" [disabled]="registry_disabled">{{'CommonlyUse.next' | translate}}</button>
    </clr-stepper-panel>

    <clr-stepper-panel formGroupName="psp">
      <clr-step-title>{{'PSP.pspConfigTitle' | translate}}</clr-step-title>
      <clr-step-description></clr-step-description>
      <clr-step-content *clrIfExpanded>
        <clr-toggle-container clrInline class="no-warp no-warp2">
          <label>{{'PSP.enablePSP' | translate}}</label>
          <clr-toggle-wrapper>
            <input type="checkbox" clrToggle name="enablePSP" value="enablePSP" formControlName="enablePSP"
              (ngModelChange)="selectChange($event)" />
            <label>{{enablePSP}}</label>
          </clr-toggle-wrapper>
        </clr-toggle-container>
        <button clrStepButton="next" (click)="onClickNext()">{{'CommonlyUse.next'| translate}}</button>
      </clr-step-content>
    </clr-stepper-panel>

    <clr-stepper-panel formGroupName="yaml" class="yaml-warp">
      <clr-step-title>{{'NewCluster.checkYAML'|translate}}</clr-step-title>
      <clr-step-description></clr-step-description>
      <clr-step-content *clrIfExpanded>
        <button class="btn btn-sm yamlbtn" (click)="generateYaml()">{{'NewCluster.getYAML'|translate}}</button>
        <br>
        <clr-textarea-container>
          <label>YAML</label>
          <label style="color: #247bae; font-size: 11px;" *ngIf="editorModeHelperMessage">{{'CommonlyUse.editorModeHelperMessage'| translate}}</label>
          <textarea clrTextarea (click)="initYAMLEditorByEvent($event)" id="yaml" class="t3" name="yaml" formControlName="yaml"
            required></textarea>
        </clr-textarea-container>
        <clr-alert [clrAlertClosable]='false' clrAlertType="danger"
          *ngIf="(isCreatedSubmit && isCreatedFailed) || (isGenerateSubmit && isGenerateFailed)">
          <clr-alert-item>
            {{errorMessage}}
          </clr-alert-item>
        </clr-alert>
        <br>
        <button class="btn btn-primary" [disabled]='submitDisable' (click)="createNewOpenfl()">{{'CommonlyUse.submit'
          | translate}}</button>
        <span *ngIf="isCreatedSubmit && !isCreatedFailed">{{'CommonlyUse.submitting' | translate}} ... </span>
        <clr-spinner [clrInline]="true" *ngIf="isCreatedSubmit && !isCreatedFailed"></clr-spinner>
      </clr-step-content>
    </clr-stepper-panel>
  </form>
</div>